<template>
	<view id="Details">
		<van-nav-bar :border="false" left-arrow @click-left="onClickLeft" />
		<!-- 轮播(商城点击立即购买的时候，把轮播图的数据传过来) -->
		<ProSwipe :images="images" />
		<!-- 限时秒杀 -->
		<!-- <view class="Time_limit_seconds_kill">
			<view class="title">
				<text>限时秒杀</text>
			</view>
			<Countdown />
		</view> -->
		<!-- 从商城页传过来的数据(暂时没有接口) -->
		<view class="pro">
			<!-- <view class="price">
				<view class="price_pro"><text class="Current_price">{{ datailsDate.price }}</text>USDT<text
						class="Past_price">{{ datailsDate.OriginalPrice }}USDT</text></view>
				<PricePiece :Sold_out="datailsDate.each" />
			</view>
			<view class="pro_title">
				<text>{{ datailsDate.name }}</text>
				<text>已售{{ datailsDate.each }}件</text>
			</view> -->
			<view class="leftProImg">
				<image src="../../static/images/Shop/service.png" mode=""></image>
			</view>
			<view class="rightProPriceAndName">
				<view class="proName">{{ datailsDate.name }}</view>
				<view class="discountedPrice">
					<text><text>{{datailsDate.price}}</text>USDT</text>
					<text>{{datailsDate.OriginalPrice}}USDT</text>
				</view>
			</view>
		</view>
		<!-- vip节点 -->
		<view class="pro_guarantee">
			<text>保障</text>
			<text>购买后可加入VIP节点，每天领取奖励</text>
			<van-icon name="arrow" />
		</view>
		<!-- 死图 -->
		<image class="Product_drawing" src="../../static/images/Shop/shop_details.png" mode=""></image>
		<view class="BuyBtn">
			<ProButton color="#4E47FF" @click="ShowBottomFn(true)">
				<template v-slot:text>
					<view>立即购买</view>
				</template>
			</ProButton>
		</view>
		<!-- 弹出层 -->
		<van-popup v-model:show="store.state.showBottom" round position="bottom"
			:style="{ height: '80%', backgroundColor: '#222324' }">
			<view class="orderTitle">
				<h4>订单确认</h4>
				<van-icon name="cross" class="cross" @click="ShowBottomFn(false)" />
			</view>
			<!-- 选择方式 -->
			<view class="Explanatory_text">
				<!-- 选择使用方式 -->
				<view class="Selection_mode">
					<view>
						<text>选择使用方式</text>
						<van-icon name="question-o" style="margin-left: 5px" @click="ShowExplanatoryText = true" />
					</view>
					<view class="PackUp" v-if="ShowExplanatoryText">
						<van-icon name="arrow-down" style="margin-right: 5px" />
						<text @click="ShowExplanatoryText = false">收起</text>
					</view>
				</view>
				<view class="Instructions" v-if="ShowExplanatoryText">
					<view>托管：<text>说明文字说明文字</text></view>
					<view>设备兑换券：<text>说明文字说明文字说明文字</text></view>
					<view>寄回：<text>说明文字说明文字</text></view>
				</view>
			</view>
			<van-tabs v-model:active="active" type="card" @change="GETTitle">
				<van-tab title="托管" name="托管">
					<Trusteeship></Trusteeship>
				</van-tab>
				<van-tab title="设备兑换券" name="设备兑换券">
					<Certificate></Certificate>
				</van-tab>
				<van-tab title="寄回" name="寄回">
					<!-- 接受数据 -->
					<SendBack></SendBack>
				</van-tab>
			</van-tabs>
		</van-popup>
	</view>
</template>

<script setup lang="ts">
	// import Countdown from "@/components/product/Countdown/index.vue";
	import ProSwipe from "@/components/product/ProSwipe/index.vue";
	// import PricePiece from "@/components/product/PricePiece/index.vue";
	import ProButton from "@/components/product/ProButton/index.vue";
	import SendBack from "@/components/product/SendBack/index.vue";
	import Certificate from "@/components/product/Certificate/index.vue";
	import Trusteeship from "@/components/product/Trusteeship/index.vue";
	import { ref } from "vue";
	import type { Product } from "@/types/product.js";
	import { useStore } from "vuex";
	const store = useStore();
	// console.log(state.product)
	// 父组件声明子组件需要的内容
	const images : Array<string> = [
		"/static/images/Shop/Shop_first_bg.png",
		"https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
		"https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
	];
	// 商城数据
	let datailsDate : Product = store.state.product;
	console.log(datailsDate)
	const onClickLeft = () => {
		uni.switchTab({
			url: '/pages/product/index'
		})
	};
	// 关闭当前弹出层
	const ShowBottomFn = (value : Boolean) => {
		// commit('EditShowBottom', true)
		store.commit("EditShowBottom", value);
	};
	// let showBottom = ref<boolean>(false)
	const active = ref("寄回");
	// 将选择方式保存到store里面
	const GETTitle = (e : string) => {
		store.commit('SaveSelectionFn', e)
	}
	// 控制说明文字的显示
	let ShowExplanatoryText = ref<boolean>(false);
</script>

<style lang="scss" scoped>
	::v-deep .van-popup {
		border-radius: 40px;
	}

	::v-deep .van-tab {
		background: #38393a;
		border: 2px #aaabab solid;
		border-radius: 15px;
		margin: 0 10px;
		padding: 0 12px;
		color: #fff;
		box-sizing: border-box;
	}

	::v-deep .van-tab__text {
		z-index: 0;
	}

	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	::v-deep.van-tab--active {
		// border-image-source: url("../src/static/images/Shop/border.png"); //设置图片来源
		// border-image-slice: 15; //设置切割大小
		// border-image-repeat: round; //设置填充模式
		// border-radius: 20px !important;
		// background-color: #000001;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		// border-radius: 14px;
		padding: 0 12px;
	}

	::v-deep.van-tab--active::before {
		content: '';
		position: absolute;
		inset: 1px;
		background-color: #000001;
		border-radius: inherit;
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}

	::v-deep .van-stepper {
		display: flex;
	}

	::v-deep .van-stepper__minus {
		border-right: none !important;
	}

	::v-deep .van-stepper__plus {
		border-left: none !important;
	}

	::v-deep .van-stepper__minus,
	::v-deep .van-stepper__plus,
	::v-deep .van-stepper__input {
		width: 40px;
		height: 40px;
		background: none;
		border: 1px solid gray;
		color: gray;
		margin: 0;
	}

	::v-deep .van-tag {
		height: 30px;
	}

	::v-deep .van-tab__text {
		width: 100%;
		height: 50px;
		font-size: 28px;
		text-align: center;
		line-height: 50px;
		font-weight: normal;
	}

	::v-deep .van-tabs__wrap {
		height: 100px;
	}

	::v-deep .van-tabs__nav {
		height: 100px;
		background: none;
		border: none;
	}

	::v-deep .van-tabs__content {
		margin: 30px 16px;
		padding-bottom: 100px;
	}

	::v-deep .van-button {
		display: block;
		width: 400px;
		height: 88px;
		font-size: 32px;
		margin: 0 auto;
	}

	::v-deep .van-nav-bar__arrow {
		color: #fff;
		font-size: 40px;
	}

	::v-deep .van-nav-bar__content {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #121316;
		height: 100px;
		line-height: 100px;
	}

	#Details {
		background-color: #111111;

		.Time_limit_seconds_kill {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100px;
			background: linear-gradient(to right, #c9f3ff, #e5e9ff, #a29ff5);

			.title {
				width: 248px;
				height: 100px;
				color: #fff;
				font-size: 44px;
				background: linear-gradient(to right, #9c3c92, #4e47ff, #21f5ea);
				border-bottom-right-radius: 80px;
				text-align: center;
				line-height: 100px;
			}
		}

		.pro {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 686px;
			height: 248px;
			background-color: rgba(236, 240, 255, 0.1);
			// background-color: #23242b;
			border-radius: 20px;
			margin: 72px 4% 30px 4%;
			// background-size: cover;
			// background-position: left left;
			// background-repeat: no-repeat;
			// background-attachment: fixed;

			// .posOverlay {
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	bottom: 0;
			// 	left: 0;
			// 	margin: auto; //从这里到上面都是垂直居中代码
			// 	width: 100%;
			// 	height: 100%;
			// 	text-align: center;
			// 	overflow: hidden;
			// 	border-radius: 6px;
			// 	background: inherit;
			// 	z-index: 1;
			// 	// border: 1px solid red;
			// }

			// .posOverlay::before {
			// 	content: '';
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	bottom: 0;
			// 	left: 0;
			// 	background: inherit;
			// 	background-attachment: fixed; //固定背景
			// 	filter: blur(4px);
			// 	-webkit-filter: blur(4px);
			// 	-moz-filter: blur(4px);
			// 	-ms-filter: blur(4px); //浏览器兼容 
			// 	filter: blur(4px);
			// }

			// .posOverlay::after {
			// 	content: "";
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	bottom: 0;
			// 	left: 0;
			// 	background: rgba(0, 0, 0, 0.2);
			// }
			.leftProImg {
				image {
					width: 160px;
					height: 165px;
					margin: 40px 0 43px 29px;
				}
			}

			.rightProPriceAndName {
				color: #fff;
				margin-left: 65px;

				.proName {
					font-weight: bold;
					font-size: 32px;
					margin-bottom: 44px;
				}

				.discountedPrice {
					display: flex;
					// justify-content: center;
					align-items: center;
					margin: 0 137px 0 0;

					text:nth-of-type(1) {
						color: rgba(78, 71, 255, 1);
						font-size: 18px;

						text {
							font-size: 54px;
						}
					}

					text:nth-of-type(2) {
						text-decoration: line-through;
						margin-left: 11px;
						width: 155px;
						height: 31px;
						font-size: 28px;
						font-family: ArialMT;
						color: rgba(255, 255, 255, 0.5);
						line-height: 32px;
						letter-spacing: 1px;
					}
				}
			}
		}

		.pro_guarantee {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			width: 92%;
			height: 98px;
			background-color: #242528;
			border-radius: 20px;
			margin: 0 4%;
			color: #fff;
			font-size: 28px;

			&>text:nth-of-type(1) {
				width: 56px;
				height: 32px;
				border: 1px solid #fff;
				border-radius: 5px;
				text-align: center;
				line-height: 32px;
				padding: 5px;
			}
		}

		.Details_page {
			color: #fff;
			font-size: 14px;
			text-align: center;
			margin-top: 97px;

			&>view {
				margin-top: 10px;
			}
		}

		.Product_drawing {
			width: 100%;
			height: 1100px;
			margin-top: 97px;
			margin-bottom: 136px;
		}

		.BuyBtn {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			/* margin: 0 auto; */
			background-color: rgba(18, 19, 23, 1);
			border-top: 1px solid gray;
			padding: 24px 0;
		}

		.orderTitle {
			position: relative;
			width: 91%;
			height: 97px;
			color: #fff;
			text-align: center;
			line-height: 97px;
			// padding: 24px 0;
			font-size: 32px;
			margin: 0 auto;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);

			&>h4 {
				font-weight: normal;
			}

			.cross {
				position: absolute;
				top: 50%;
				right: 5%;
				transform: translateY(-50%);
			}
		}

		.Explanatory_text {
			width: 93%;
			/* height: 166px; */
			font-size: 28px;
			color: #fff;
			/* background-color: red; */
			margin: 20px auto;

			.Selection_mode {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				&>.PackUp {
					color: #00d0b9;
				}
			}

			.Instructions {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 96%;
				height: 111px;
				background-color: #000001;
				border-radius: 10px;
				font-size: 24px;
				margin-top: 8px;
				padding: 2%;
				color: #959595;
			}
		}
	}
</style>